<template>
  <div class="banner" :style="{'background': `#${bannerCheckedBackound[bannerChecked]}`}" :class="{'candyClass': type === 2}">
    <div class="bannerWrap" :class="{ 'noCarouselIndi' : bannerData.length === 1 }">
      <el-carousel :height="type === 1 ? '515px' : '352px'" :interval="6000" arrow="never" @change="handleBannerChange">
        <template v-for="item in bannerData">
          <el-carousel-item :key="item.id" v-if="item.imageUrl">
            <div class="mainView">
              <template v-if="item.eventUrl">
                <img :src="item.imageUrl" alt="" @click="handleToTransaction(item.eventUrl)" style="cursor: pointer;">
              </template>
              <img v-else :src="item.imageUrl">
              <span class="video-btn" v-if="item.videoUrl" @click="handlePlayVideo(item.videoUrl)"></span>
              <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
            </div>
          </el-carousel-item>
        </template>
      </el-carousel>
    </div>
    <!-- 站外新开页面 -->
    <a :href="bannerUrl" class="hidden" target="_blank" ref="bannerUrlRef"></a>
    <!-- 站内不用新开页面 -->
    <a :href="bannerUrl" class="hidden" ref="bannerUrlRef1"></a>
    <!-- 视频组件 -->
    <my-video
    :video-config="videoConfig"
    @listenVideoLevel="handleVideoLevel"/>
  </div>
</template>

<script>
import MyVideo from '@/components/Video';
import axios from 'axios'
import qs from 'qs';
import { getReqUrl } from '@/utils/validate';

export default {
  name: 'banner', // 轮播图
  data() {
    return {
      bannerUrl: '',
      bannerChecked: 0, // 滚动切换到的banner
      bannerCheckedBackound: [], // 轮播图背景色
      bannerData: [], // 轮播图信息
      videoUrl: 'https://newdex.oss-cn-hangzhou.aliyuncs.com/newdex-zh.mp4',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/CMfdI31u1wE?rel=0&amp;controls=0&amp;showinfo=0', // 国外访问视频地址
        zh: 'https://newdex.oss-cn-hangzhou.aliyuncs.com/newdex-zh.mp4' // 国内
      },
    }
  },
  components: {
    MyVideo
  },
  props: {
    type: {
      type: Number,
      defalut: 1,
    }
  },
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetBanner();
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetBanner();
  },
  beforeDestroy() {},
  methods: {
    // 点击banner跳转
    handleToTransaction(eventUrl) {
      const host = window.location.host;
      let href = eventUrl;
      if (eventUrl.indexOf('trade') >= 0 && !eventUrl.split('trade')[1] && eventUrl.indexOf('api-trade') < 0 && this.$appName === 'eosNewdex') {
        const symTrad = this.$store.state.app.trade;
        let tradeParams = null;
        if (symTrad && symTrad.symbol) {
          tradeParams = symTrad.symbol;
        } else {
          tradeParams = 'newdexissuer-ndx-eos'
        }
        this.$router.push({
          path: `/trade/${tradeParams}`
        });
        return;
      }

      const language = this.$store.state.app.language;
      if ((language === 'en' || language === 'ko') && eventUrl.indexOf('report-cn') >= 0) {
        window.open('https://ndi.340wan.com/pdf/newdex-2019-annual-report-en.pdf?v=1.1');
        return;
      }
      // 站内跳转
      if (eventUrl.indexOf('newdex.io') >= 0 || eventUrl.indexOf('newdex.vip') >= 0) {
        if (eventUrl.indexOf('newdex.io') >= 0) {
          href = eventUrl.replace('newdex.io', host);
        }
        if (eventUrl.indexOf('newdex.vip') >= 0) {
          href = eventUrl.replace('newdex.vip', host);
        }
        this.bannerUrl = href;
        this.$nextTick(() => {
          this.$refs.bannerUrlRef1.click();
        });
      } else { // 站外跳转
        this.bannerUrl = href;
        this.$nextTick(() => {
          this.$refs.bannerUrlRef.click();
        });
      }
    },
    handleBannerChange(val) {
      this.bannerChecked = val;
    },
    // 获取banner数据
    handleGetBanner() {
      const linkUrl = getReqUrl();
      const language = this.$store.state.app.language;
      const params = {
        type: this.type
      };
      const scatter = this.$store.state.app.scatter;
      let chain = 'eos';
      let project = 'newdex';
      if (scatter && scatter.identity) {
        const wallet = scatter.wallet;
        if (wallet) {
          chain = scatter.chain || 'eos';
        }
      }
      if (this.$appName === 'tronNewdex') {
        chain = 'tron';
        project = 'trondex';
      }
      axios({
        method: 'post',
        url: `${linkUrl}/api/commons/banner/list`,
        data: qs.stringify(params),
        headers: {
          chain,
          channel: 'web',
          project,
          language,
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then((res) => {
        // if (res.code !== 0) {
        //   this.$message.error(res.msg);
        //   return;
        // }
        const result = res.data;
        this.bannerData = result.data;
        this.bannerCheckedBackound = result.data.map(v => v.sideColor);
      })
    },

    // 视频播放
    handlePlayVideo(videoUrl) {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = videoUrl;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoConfig.zh = videoUrl;
      } else {
        this.videoConfig.en = videoUrl;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },

    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  background: linear-gradient(to right, #3248CA , #1B2B8C);
  background-size: cover;
  height: 600px;
  color: white;
  margin-top: -50px;

  .noCarouselIndi {
    /deep/ .el-carousel__indicators {
      display: none;
    }
  }

  .bannerWrap {
    width: 1260px;
    min-width: 1260px;
    max-width: 1260px;
    width: 100%;
    margin: auto;
    padding-top: 50px;
  }

  .mainView{
    width: 100%;
    position: relative;
    overflow: hidden;

    img {
      display: block;
      vertical-align: middle;
      max-width: 100%;
      width: 100%;
      height: 515px;
    }

    .video-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      right: 240px;
      transform: translate3d(-50%, -50%, 0);
      background: url('../assets/img/videoplay.png');
      background-size: cover;
      cursor: pointer;
    }
  }
}

.candyClass {
  background: #fff;
  height: 352px;

  .noCarouselIndi {
    /deep/ .el-carousel__indicators {
      display: none;
    }
  }

  .bannerWrap {
    padding-top: 0;

    .mainView {
      height: 352px;

      img {
        height: 352px;
      }
    }
  }
}
.theme-1B1D27 {
  .mainView {
    // background: #0d1939 !important;
  }
}
</style>

